<template>
  <div v-loading="loading" class="control">
    <section class="info-container">
      <el-descriptions class="descriptions-list" size="large" border>
        <template #title>
          <div class="descriptions-title">
            <el-icon class="descriptions-title-icon">
              <Service />
            </el-icon>
            <span>系统身份</span>
          </div>
        </template>
        <template #extra v-if="OperateSystemIdentity">
          <el-button @click="toggleAddRoleBox">
            <el-icon>
              <Plus />
            </el-icon>
          </el-button>
          <el-button @click="toggleEditPermission">
            <el-icon v-if="permissionTableEditEndable">
              <Check />
            </el-icon>
            <el-icon v-else>
              <Edit />
            </el-icon>
          </el-button>
        </template>
      </el-descriptions>
      <el-table :data="roles" style="width: 100%" border>
        <el-table-column prop="id" label="RID" />
        <el-table-column prop="name" label="称呼">
          <template v-slot="scope">
            <el-input v-if="scope.row.inTableEdit != undefined" v-model="scope.row.inTableEdit.name"></el-input>
            <span v-else>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column v-for="permission in permissionsList" :key="permission.id">
          <template #header>
            <el-tooltip class="box-item" effect="dark" placement="top" :content="permission.detail">{{ permission.name
            }}</el-tooltip>
          </template>
          <template #default="scope">
            <!-- <el-select v-if="scope.row.inTableEdit != undefined"
              v-model="scope.row.inTableEdit.inTableRecordSelectPermissions[permission.id]">
              <el-option :value="1" label="YES" />
              <el-option :value="0" label="NO" />
            </el-select> -->
            <el-checkbox v-if="scope.row.inTableEdit != undefined"
              v-model="scope.row.inTableEdit.inTableRecordSelectPermissions[permission.id]" :true-label="1"
              :false-label="0" size="large" />
            <span v-else>{{ scope.row.permissions.indexOf(permission.id) > -1 ? 'YES' : '' }}</span>
          </template>


        </el-table-column>
        <el-table-column label="操作" v-if="permissionTableEditEndable">
          <template v-slot="scope">
            <el-button type="primary" circle @click="toggleInPermissionTableEidt(scope.row)">
              <el-icon v-if="scope.row.inTableEdit == undefined">
                <Edit />
              </el-icon>
              <el-icon v-else>
                <Check />
              </el-icon>
            </el-button>
            <el-button type="danger" circle @click="openDeleteRoleConfirmMessageBox(scope.row)">
              <el-icon>
                <Delete />
              </el-icon>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="add-role-box" v-if="addRoleWidget.enable">
        <div class="add-role-left">
          <el-input class="add-role-left-input" v-model="addRoleWidget.form.name" placeholder="身份的称呼" />
        </div>
        <div class="add-role-right">
          <el-button @click="addRole">添加</el-button>
          <el-button @click="toggleAddRoleBox">取消</el-button>
        </div>
      </div>
    </section>
  </div>
  <!-- <Loading :isLoading="loading" /> -->
</template>

<script>
import { post } from '../../../utils/common/api';

export default {
  data() {
    return {

      roles: [],

      permissionsList: [],//所有权限的列表

      addRoleWidget: {
        enable: false,

        form: {
          name: ''
        }
      },

      permissionTableEditEndable: false,

      selectOptions: [
        {
          value: '1',
          label: 'YES'
        },
        {
          value: '0',
          label: 'NO'
        }
      ],

      loading: false,

    }
  },
  computed: {
    OperateSystemIdentity() {
      return this.usePermission.systemPermission.includes(1) || this.usePermission.systemPermission.includes(12)
    }
  },

  methods: {
    async updateRoles() {
      const res = await post('/user/role/all', {})
      this.roles = res.list
    },

    async updatePermissions() {
      const res = await post('/user/permission/all', {})
      this.permissionsList = res.list
    },

    async loadData() {
      this.loading = true;
      await this.updateRoles()
      await this.updatePermissions()
      this.loading = false
    },

    toggleAddRoleBox() {
      this.addRoleWidget.enable = !this.addRoleWidget.enable
      this.addRoleWidget.form.name = ''
    },

    addRole() {
      var that = this
      console.log(that.addRoleWidget)
      post('/user/role/create', that.addRoleWidget.form).then(function (res) {
        ElNotification({
          title: '创建成功',
          message: `您刚刚创建了新的身份 ${res.name} (${res.id})`,
          type: 'success',
          position: 'bottom-right',
        })
        that.toggleAddRoleBox()
        that.updateRoles()
      })
    },

    toggleEditPermission() {
      this.permissionTableEditEndable = !this.permissionTableEditEndable
    },

    toggleInPermissionTableEidt(row) {
      var that = this
      if (row.inTableEdit == undefined) {
        row.inTableEdit = {
          inTableRecordSelectPermissions: [],
          name: '',
          permissions: []
        }
        row.inTableEdit.inTableRecordSelectPermissions = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
        row.permissions.forEach(item => {
          row.inTableEdit.inTableRecordSelectPermissions[item] = 1
        })
        row.inTableEdit.name = row.name

      } else {
        row.inTableEdit.inTableRecordSelectPermissions.forEach((item, index) => {
          if (item == true) {
            row.inTableEdit.permissions.push(index)
          }
        })
        // console.log(row.inTableEdit);
        post('/user/role/update', {
          id: row.id,
          mod: row.inTableEdit
        }).then(function (res) {
          Object.assign(row, res)
          ElNotification({
            title: '修改成功',
            message: `您刚刚修改了系统身份 ${res.name} 的相关权限`,
            type: 'success',
            position: 'bottom-right',
          })
          that.updateRoles()
        })
        row.inTableEdit = undefined
      }

    },

    deleteRole(role) {
      var that = this
      post('/user/role/delete', {
        id: role.id
      }).then(function (res) {
        ElNotification({
          title: '删除成功',
          message: `删除了系统身份${role.name}`,
          type: 'success',
          position: 'bottom-right',
        })
        that.updateRoles()
      })
    },

    openDeleteRoleConfirmMessageBox(role) {
      var that = this
      ElMessageBox.confirm(
        `将系统身份"${role.name}"从系统中移除?`,
        '警告',
        {
          confirmButtonText: 'OK',
          cancelButtonText: 'Cancel',
          type: 'warning',
        }
      )
        .then(() => {
          that.deleteRole(role)
        })
        .catch(() => { })
    }
  },

  mounted() {
    this.loadData()
  }
}
</script>

<style scoped>
.info-container {
  padding: 20px 0;
}

.descriptions-list {
  width: 100%;
}

.descriptions-title {
  display: flex;
  align-items: center;
}

.descriptions-title-icon {
  margin-right: 8px;
}

.add-role-box {
  display: flex;
  margin-top: 8px;
}

.add-role-left {
  display: flex;
  flex-grow: 1;
  padding-right: 12px;
}

.add-role-left>* {
  margin-right: 8px;
}

.add-role-right {
  flex-grow: 0;
}
</style>